<template>
	<div>
		<AplidForm ref="aplidForm" v-bind="defineConfig" :model="modelData" @submit="onSubmit" @reset="onReset"></AplidForm>
	</div>
	<div>
		<el-popover placement="right" trigger="click">
			<template #reference>
				<el-button>批量操作</el-button>
			</template>
			<div>
				<el-button type="success" size="small" @click="batchApproval">审批通过</el-button>
				<el-button type="danger" size="small" @click="batchDel">删除</el-button>
			</div>
		</el-popover>
		<el-button :icon="Refresh" @click="toRefresh">刷新</el-button>
	</div>

	<div style="margin-top: 20px">
		<el-table
			:key="tableChildKey"
			:data="treeData"
			style="width: 100%"
			row-key="id"
			border
			lazy
			:load="load"
			:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
		>
			<el-table-column algin="center" prop="taskItemId" label="任务编号" />
			<el-table-column algin="center" prop="taskName" label="任务名称" />
			<el-table-column algin="center" prop="administrationPidName" label="发放人">
				<template #default="{ row }">
					{{ row.administrationPidName }}
				</template>
			</el-table-column>
			<el-table-column algin="center" prop="administrationName" label="接收人" />
			<el-table-column algin="center" prop="fillingTime" label="提交时间" />
			<el-table-column algin="center" width="100px" prop="taskStatusLabel" label="任务状态">
				<template #default="{ row }">
					<el-tag effect="light" type="primary" style="background: rgba(105, 158, 245, 0.2); color: rgb(105, 158, 245); border: none">{{
						row.taskStatusLabel
					}}</el-tag>
				</template>
			</el-table-column>
			<el-table-column algin="center" label="操作" width="120px">
				<template #default="{ row }">
					<el-text type="primary" class="text_btn" @click="showDetail(row, 'detail')">查看</el-text>
					<el-text
						v-if="row.taskStatus == 'PENDING_APPROVAL' && row.taskStatus != 'ENDED' && !row.dataType"
						type="success"
						class="text_btn"
						@click="showDetail(row, 'approval')"
						>审批</el-text
					>
				</template>
			</el-table-column>
		</el-table>
		<!-- 打开详情 -->
		<AplidDialog width="80%" v-model="showSubTaskDetail" title="子任务详情">
			<!-- 详情 -->
			<DetailPart v-if="dialogType == 'detail'" :nowRowData="detailInfo" type="sub" :detailType ="detailType" :needExport="false"></DetailPart>
			<!-- 审批 -->
			<div v-if="dialogType == 'approval'">
				<!-- <PreviewTable :is-read="true" :data="childTable"></PreviewTable> -->
				<TaskInfo :is-read="true" :nowRowData="taskInfo"></TaskInfo>
				<div style="margin: 10px 0">审批结果</div>
				<el-radio-group v-model="approvalResult" class="ml-4">
					<el-radio value="PASS" size="large">通过</el-radio>
					<el-radio value="REJECT" size="large">驳回</el-radio>
				</el-radio-group>
				<div class="btn_part">
					<el-button @click="showSubTaskDetail = false">取消</el-button>
					<el-button type="primary" @click="toSure(detailInfo, approvalResult)">确认</el-button>
				</div>
			</div>
		</AplidDialog>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from 'vue'
import { Refresh } from '@element-plus/icons-vue'
import DetailPart from '@/views/governmentAffairs/subTask/detailPart/index.vue'
import PreviewTable from '@/views/governmentAffairs/overallTask/previewTable/index.vue'
import TaskInfo from '@/views/governmentAffairs/overallTask/detailPart/bottomTabs/taskInfo.vue'
import apiMod from '@/apiMod/index'
import { cloneDeep } from 'lodash-es'

let props = defineProps({
	dataId: {
		type: String,
		default: '',
	},
	nowRowData: {
		type: Object,
		default: () => ({}),
	},
})
let aplidForm = ref()
const toRefresh = () => {
	aplidForm.value.onSubmit()
}
let emits = defineEmits(['refresh'])
let modelData = ref({})
let approvalResult = ref('PASS')
let showSubTaskDetail = ref(false)
let tableChildKey = ref(0)

let defineConfig = {
	label: '基础信息',
	prop: 'base0',
	labelWidth: '120px',
	inline: true,
	showBtn: true,
	labelPosition: 'left',
	column: [
		{
			label: '子任务编号',
			type: 'input',
			prop: 'taskItemId',
			span: 8,
		},
		{
			label: '发起人',
			prop: 'administrationPidName',
			span: 8,
		},
		{
			label: '接收人',
			prop: 'administrationName',
			span: 8,
		},
		{
			label: '提交时间',
			type: 'daterange',
			format: 'YYYY年MM月DD',
			valueFormat: 'YYYY-MM-DD',
			prop: 'fillingTimeBetween',
			span: 8,
		},
		{
			label: '任务状态',
			type: 'remoteSelect',
			code: 'GOVERNMENT_SUB_STATUS',
			api: 'getDictItemList',
			prop: 'taskStatus',
			span: 8,
		},
	],
}
let detailInfo = ref({})
let dialogType = ref('detail')
let childTable = ref({
	head: {},
	data: [],
})
let taskInfo = ref({})
let detailType = ref('self')
const showDetail = async (row, type) => {
	if(type=='detail'){
		detailType.value = 'sub'
	}else{
		detailType.value = 'self'
	}
	// 获取子级的表格
	let res = await apiMod.view_zwglTaskInfo_view(row.primaryKey)
	taskInfo.value = res.data
	childTable.value = res.data.metadataJson
	dialogType.value = type
	showSubTaskDetail.value = true
	detailInfo.value = res.data
}

const load = (row, treeNode: unknown, resolve: (date: any) => void) => {
	row.children.forEach((el) => {
		el.dataType = 'child'
	})
	resolve(row.children)
}
const tableData = [
	{
		id: 1,
		date: '2016-05-02',
		name: 'wangxiaohu',
		address: 'No. 189, Grove St, Los Angeles',
	},
	{
		id: 2,
		date: '2016-05-04',
		name: 'wangxiaohu',
		address: 'No. 189, Grove St, Los Angeles',
	},
	{
		id: 3,
		date: '2016-05-01',
		name: 'wangxiaohu',
		address: 'No. 189, Grove St, Los Angeles',
		hasChildren: true,
	},
]
let treeData = ref([])
// 获取树形任务
let idList = ref()
const getTreeData = async (form = {}) => {
	let params = {
		id: props.dataId,
		operateType: 'SUBTASK_LIST',
		...form,
	}
	let res = await apiMod.view_zwglTaskInfo_tree(params)
	treeData.value = res.data
	tableChildKey.value = Math.random()
	idList.value = res.data.map((item) => item.primaryKey)
}
getTreeData()
const onSubmit = (form, done) => {
	let copyForm = cloneDeep(form)
	if (copyForm.fillingTimeBetween) {
		copyForm.fillingTimeBetween[0] = copyForm.fillingTimeBetween[0] + ' 00:00:00'
		copyForm.fillingTimeBetween[1] = copyForm.fillingTimeBetween[1] + ' 23:59:59'
		copyForm.fillingTimeBetween = copyForm.fillingTimeBetween.join(',')
	}

	if (
		!copyForm.administrationName &&
		!copyForm.administrationPidName &&
		!copyForm.fillingTimeBetween &&
		!copyForm.taskItemId &&
		!copyForm.taskStatus
	) {
		copyForm.operateType = 'SUBTASK_LIST'
	} else {
		copyForm.operateType = 'SUBTASK_SEARCH'
	}

	getTreeData(copyForm)
	done()
}
const onReset = (form) => {
	form.operateType = 'SUBTASK_LIST'
	getTreeData(form)
}

const toSure = (row, type) => {
	let params = {
		id: row.primaryKey,
		eventEnum: type,
		taskStatus: 'PENDING_APPROVAL',
		taskStatusLabel: '待审批',
		metadataJson: JSON.stringify(childTable.value),
	}
	apiMod.view_zwglTaskInfo_approval(params).then((res) => {
		//关闭弹窗，刷新页面
		if (res.code == 0) {
			showSubTaskDetail.value = false
			ElMessage.success('操作成功')
			toRefresh()
			approvalResult.value = 'PASS'
			// 延时刷新
			let ysq = setTimeout(() => {
				emits('refresh')
				clearTimeout(ysq)
			}, 1000)
		}
	})
}
// 批量通过
const batchApproval = () => {
	apiMod
		.view_zwglTaskInfo_batchApproval({
			idList: idList.value,
			eventEnum: 'PASS',
		})
		.then((res) => {
			if (res.code == 0) {
				ElMessage.success('操作成功')
				toRefresh()
				// 延时刷新
			let ysq = setTimeout(() => {
				emits('refresh')
				clearTimeout(ysq)
			}, 1000)
			}
		})
}
// 批量删除
const batchDel = () => {
	apiMod
		.view_zwglSubTaskInfo_del({
			batchesDel: idList.value,
		})
		.then((res) => {
			if (res.code == 0) {
				ElMessage.success('操作成功')
				toRefresh()
				emits('refresh')
			}
		})
}



defineExpose({
	getTreeData,
})
</script>
<style scoped lang="scss">
.text_btn {
	cursor: pointer;
	margin-right: 10px;
}
.btn_part {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin-top: 30px;
}
</style>
